<template>
  <div class="home">
    <van-search
      v-model="value"
      shape="round"
      fixed
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @click="$router.push('/search')"
    />

    <van-tabs :before-change="get_cade_id">
      <van-tab v-for="(index, i) in list" :title="index.name" :key="i" >
      </van-tab>
    </van-tabs>

      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
       <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="get_Data"
        :immediate-check = "false"
      >
  
  <div class="banner" v-for="item in b" @click="$router.push({path:'/article',query:{article_id:item._id,title:item.title}})">
      <span>{{ item.title }}</span>
      <van-grid :border="false" :column-num="1">
        <van-grid-item v-for="item2 in item.imageSrc" v-lazy="item2">
          <van-image :src="item2" />
        </van-grid-item>
      </van-grid>
      <p>{{ item.author }} 评论{{ item.time | moment }}</p>
    </div>
    
        </van-list>

      </van-pull-refresh>

     
    <div class="footer">
      <van-tabbar
        v-model="active"
        active-color="#4fc08d"
        inactive-color="#000"
        fixed
        route
      >
        <van-tabbar-item replace  icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item replace  icon="search" to="/publish">发布</van-tabbar-item>
        <van-tabbar-item replace  icon="friends-o"  to="/my">我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { Search } from "vant";
import { Tab, Tabs } from "vant";
import { Image } from "vant";
import { Grid, GridItem ,List ,  PullRefresh} from "vant";
// import { Tabbar, TabbarItem } from 'vant';

export default {
  name: "Home",
  data() {
    return {
      value: "",
      name: "",
      active: "",
      fixed: true,
      list: [], 
      a: "",
      b: [], //文章列表
      loading:false,
      finished:false  ,  // 是否全部加载完毕了
      skip:0,
      limit:20,
      isRefresh:false
    };
  },
  components: {
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    [List.name]: List,
     [PullRefresh .name]:PullRefresh
  },
  filters: {

  },
    mounted() {
      this.get_Data();
      this.get_cate();
    },
    methods: {
      //下拉刷新
      onRefresh(){
        this.b = []
        this.skip = 0;
        this.finished = false
        this.get_Data(true)
      },
      get_cate() {
        //  console.log('--------------------------------------')
        this.$http.post("/api/get_cate_list").then((res) => {
          console.log(res);
          console.log(res.data);
          this.list = res.data;
          this.get_Data()
        });
      },
      get_cade_id(index) {
        this.a = this.list[index]._id;
        this.get_Data();

        this.skip = 0;
        this.finished = false
        this.get_Data()
        return true;
      },
      get_Data(flag) {
        console.log('--------------------------------------')
        this.$http
          .post("/api/get_article_list", {
            cate_id: this.a || "610128169b33ed00018ed5df",
            skip:this.skip,
            limit:this.limit
          })
          .then((res) => {
            console.log(res.data);

            this.b = res.data;

            
              res.data = res.data.map(v=>{
                if(v.imageSrc.length){
                  v.imageSrc = v.imageSrc.map(v=>{
                    return v+'?imageslim'
                  })
                }
                return v
              })

              if(flag){
                //如果刷新操作
                console.log(res)
                this.isRefresh = false ;  //结束下拉刷新的转圈
                 this.b = res.data  //替换为新的
              }else{
                   this.b.push(...res.data)  //新数据和老数据拼接
              }
           
          
          // this.b.push(...res.data)  //新数据和老数据拼接

          let len = this.b.length;  //数量
        // // 判断数据加载完了吗  res.code 服务器返回  数据的总数
          if(len>=res.count){
              this.finished = true  //数据加载完了  再滑动也别触发事件了
          }else{
            this.limit = len;  //skip 更新
            this.loading = false  // 可以继续加载
          }
          });  
      },

    },
};
</script>

<style lang="less">
.grid:hover {
  // text-decoration: underline;
  // padding-top:5px ;
  padding-top: 2px;
  border-bottom: 2px solid green;
}

::v-deep .van-tabs--line {
  border-bottom: 1px solid #999;
}
::v-deep .van-tabs--line {
  bottom: 5.2vw;
  width: 3.6667vw;
}

.banner {
  margin-top: 10px;
}
.banner p {
  color: #ccc;
}
.banner p,
span {
  padding-left: 15px;
}
.footer {
  margin-top: 50px;
}
</style>